<!-- 用户聊天页面 -->
<template>
  <div>
    <!-- 顶部 -->
    <van-sticky>
      <div class="top_div">
        <div class="return_div" @click="this.$router.back()">
          <van-icon name="arrow-left" />
        </div>
        <div class="top_title">
          {{ userNickName }}&nbsp;
          <van-icon name="edit" @click="editUserNickName" />
        </div>
        <div class="dot">
          <van-icon name="ellipsis" size="25px" @click="threeDot" />
        </div>
      </div>
    </van-sticky>

    <!-- 上部卡片（包含头像，标签等） -->
    <div class="card">
      <div class="both_avatar">
        <div @click="toMyCenterPage">
          <van-image
            round
            width="4rem"
            height="4rem"
            :src="currentUserAvatarUrl"
          />
        </div>
        <div class="match">
          <van-progress
            :percentage="matchProcess"
            stroke-width="20"
            :show-pivot="false"
            color="#27C9BE"
            track-color="#909399"
          />
          <span class="matchProcess">匹配度{{ matchProcess }}%</span>
        </div>
        <div @click="toChatUserCenterPage">
          <van-image
            round
            width="4rem"
            height="4rem"
            :src="chatUserAvatarUrl"
          />
        </div>
      </div>
      <div class="us_tags_both" v-if="bothTags.length !== 0">
        <div class="dot_item"></div>
        <div class="like_tags">共同引力签：</div>
        <div>
          {{ bothTags }}
        </div>
      </div>
      <div class="ta_tags">
        <div class="dot_item"></div>
        <div class="like_tags">ta的引力签:</div>
        <div v-if="taTags.length !== 0">{{ taTags }}</div>
        <div v-else>暂无</div>
      </div>
    </div>

    <!-- 聊天内容 -->
    <div class="chat_main">
      <div class="per_contact" v-for="(item, index) in contacts" :key="index">
        <template v-if="userAid == item.chat.sendUserAid">
          <div class="left_ta">
            <div class="chat_avatar" @click="toChatUserCenterPage">
              <van-image round width="3rem" height="3rem" :src="item.avatar" />
            </div>
            <div style="margin-left: 5px;">
              <div class="time_style">{{ item.time }}</div>
              <div class="content_style">{{ item.chat.content }}</div>
            </div>
          </div>
        </template>
        <template v-if="userAid != item.chat.sendUserAid">
          <div class="right_my">
            <div style="margin-left: 5px;">
              <div class="time_style1">{{ item.time }}</div>
              <div class="content_style">{{ item.chat.content }}</div>
            </div>
            <div class="chat_avatar" @click="toMyCenterPage">
              <van-image round width="3rem" height="3rem" :src="item.avatar" />
            </div>
          </div>
        </template>
      </div>
    </div>

    <br />
    <br />
    <br />

    <!-- 发送消息 -->
    <van-tabbar class="send_message">
      <div>
        <textarea placeholder="输入新消息" v-model="newMessage"></textarea>
      </div>
      <div @click="sendMessage">
        <van-button
          round
          size="small"
          color="linear-gradient(to right, #ff6034, #ee0a24)"
        >
          &emsp;发&nbsp;送&emsp;
        </van-button>
      </div>
    </van-tabbar>

    <!-- 点击编辑图标显示的弹出层 -->
    <van-popup
      v-model:show="editNameShow"
      :close-on-click-overlay="isHandleClose"
      position="bottom"
      round
      :style="{ height: '20%', padding: '10px' }"
    >
      <van-field
        v-model="userNickName"
        clearable
        label="昵称"
        left-icon="https://myblog-mycaveolae.oss-cn-chengdu.aliyuncs.com/icon/nickname.png"
        placeholder="输入昵称"
        :error-message="nickNameErrorMessage"
        @blur="checkUserNickNameIsEmpty"
        @update:model-value="checkUserNickNameIsEmpty"
      />
      <div>
        <van-button type="primary" block @click="editNameFunc">确定</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {
  queryChatRecordInfo,
  editChatUserNickName,
  sendMessageToChatObject,
} from '../../api/user'
export default {
  data() {
    return {
      userAid: this.$route.query.userAid, // 其他页面传来的对方的用户aid
      userNickName: '小鱼海棠', // 用户的昵称
      editNameShow: false, // 控制编辑弹出框的显示
      nickNameErrorMessage: '', // 昵称的错误提示
      isHandleClose: true, // 点击遮罩层是否手动关闭（默认是true）
      matchProcess: 90, // 匹配度
      chatUserAvatarUrl:
        'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg', // 对方的头像URL
      currentUserAvatarUrl:
        'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg', // 当前登陆用户的头像URL
      bothTags: '', // 两人共同的标签
      taTags: '', // ta的标签
      contacts: [], // 两人的所有对话内容
      newMessage: '', // 输入框里的新消息
    }
  },
  created() {
    // 查询聊天页面所有信息
    this.getAllInfoWithChatPage()
  },
  methods: {
    // 点击编辑用户昵称
    editUserNickName() {
      this.editNameShow = true
    },

    // 点击确定修改用户昵称
    editNameFunc() {
      if (this.userNickName === '') {
        this.isHandleClose = false
        this.nickNameErrorMessage = '请输入用户你昵称'
      } else {
        const params = {
          userAid: this.userAid,
          userNickName: this.userNickName,
        }
        editChatUserNickName(params).then((res) => {
          if (res.data.code === 10000) {
            this.$toast({
              type: 'success',
              duration: 800,
              message: '修改成功！',
            })
          }
          this.editNameShow = false
        })
      }
    },

    // 判断用户昵称是否为空，为空就不能关闭弹出框
    checkUserNickNameIsEmpty() {
      if (this.userNickName === '') {
        this.isHandleClose = false
        this.nickNameErrorMessage = '请输入用户你昵称'
      } else {
        this.isHandleClose = true
        this.nickNameErrorMessage = ''
      }
    },

    // 点击右上角的三个点
    threeDot() {},

    // 查询聊天页面所有信息
    getAllInfoWithChatPage() {
      // console.log(this.userAid);
      queryChatRecordInfo(this.userAid).then((res) => {
        // console.log(res)
        this.userNickName = res.data.data.userNickName
        this.currentUserAvatarUrl = res.data.data.currentUserAvatarUrl
        this.chatUserAvatarUrl = res.data.data.chatUserAvatarUrl
        this.matchProcess = res.data.data.matchProcess
        this.bothTags = res.data.data.bothTags
        this.taTags = res.data.data.taTags
        this.contacts = res.data.data.contacts
      })
    },

    // 点击我的头像去我的页面
    toMyCenterPage() {
      this.$router.push('/personalCenter')
    },

    // 去对方的主页
    toChatUserCenterPage() {
      this.$router.push({
        path: '/userPersonalMainPage',
        query: {
          userAid: this.userAid,
        },
      })
    },

    // 点击发送新消息
    sendMessage() {
      if (this.newMessage.trim() === '') {
        this.$toast({
          type: 'fail',
          duration: 500,
          message: '请输入内容',
        })
      } else {
        const params = {
          userAid: this.userAid,
          newMessage: this.newMessage,
        }
        sendMessageToChatObject(params).then((res) => {
          if (res.data.code === 10000) {
            this.newMessage = ''
            this.getAllInfoWithChatPage()
          }
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.top_div {
  display: flex;
  background-color: rgb(224, 235, 237);
  width: 100%;
  height: 30px;
  justify-content: space-around;
  padding-top: 30px;
  color: #606266;
}
.return_div {
  width: 30px;
  // background-color: blue;
  padding-left: 20px;
}
.top_title {
  width: 40%;
  text-align: center;
  margin-left: 3.8em;
  margin-right: auto;
  color: rgb(47, 46, 44);
  font-size: 16px;
}
.dot {
  margin-right: 10px;
}
.card {
  width: 88%;
  height: 9rem;
  background-color: #ffffff;
  margin-top: 1rem;
  margin-left: auto;
  margin-right: auto;
  border-radius: 30px;
  box-shadow: 0 4px 8px 0 rgba(130, 127, 127, 0.2),
    0 6px 20px 0 rgba(160, 157, 157, 0.19);
  overflow-y: scroll;
}
.card::-webkit-scrollbar {
  display: none;
}
.both_avatar {
  display: flex;
  justify-content: space-evenly;
  padding-top: 10px;
}
.match {
  position: relative;
  width: 7rem;
  // display: flex;
  padding-top: 22px;
  align-items: center;
}
/deep/ .van-progress {
  border-radius: 10px !important;
}
.matchProcess {
  position: absolute;
  top: 22px;
  left: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.676);
}
.dot_item {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #27c9be;
  margin-right: 10px;
}
.us_tags_both {
  display: flex;
  width: 90%;
  margin: auto;
  align-items: center;
  color: #909399;
  font-size: 12px;
}
.ta_tags {
  display: flex;
  width: 90%;
  margin: auto;
  align-items: center;
  color: #909399;
  font-size: 12px;
}
.per_contact {
  margin-bottom: 15px;
}
.like_tags {
  width: 6em;
}
.chat_main {
  margin-top: 20px;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}
.time_style {
  font-size: 12px;
  color: #c0c4cc;
}
.time_style1 {
  font-size: 12px;
  text-align: right;
  color: #c0c4cc;
}
.content_style {
  color: #909399;
  letter-spacing: 2px;
  font-size: 14px;
}
.right_my {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.left_ta {
  text-align: left;
  display: flex;
}
textarea {
  width: 18em;
  border: none;
}
textarea::-webkit-scrollbar {
  display: none;
}
.send_message {
  display: flex;
  justify-content: space-between;
}
</style>
